<template>
  <!-- 自助受理服务图片查看弹窗 -->
  <el-dialog
    title="图片查看"
    :visible.sync="dialogVisible"
    :show-close="true"
    append-to-body
  >
    <div class="img_list dailog_preview">
      <el-image
        v-for="(item,index) in list"
        :key="index"
        class="img_child"
        fit="cover"
        :src="item.filePath"
        :preview-src-list="previewList"
      ></el-image>
    </div>
    <span slot="footer" class="dialog-footer">
      <Button type="primary" @click="downloading">下载</Button>
    </span>
  </el-dialog>
</template>
<script>
import Button from '@/components/Button'
import { downFileByA, deepCopy } from '@/utils'
export default {
  name: 'ImagePreview',
  components: {
    Button
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      previewList: [],
      loadPath: ''
    }
  },
  methods: {
    openDailog(data, path) {
      this.loadPath = '/img/' + path
      data = deepCopy(data)
      this.previewList = data.map(e => {
        e.filePath = '/img/' + e.filePath
        return e.filePath
      })
      this.list = data
      this.dialogVisible = true
    },
    downloading() {
      downFileByA(this.loadPath)
    }
  }
}
</script>
<style lang='scss' scoped>
.img_list {
  display: flex;
  flex-wrap: wrap;
  margin: -20px -5px;
  .img_child{
    padding: 5px;
    width: calc(33.33%);
    height: auto;
  }
}
</style>
